'use strict';
/**
 * Created by FreezeSoul on 2016/2/2.
 */
define([
        'angular',
        'jquery',
        "app/core/util",
        'app/modules/index/define',
        'app/modules/index/controllers/index-resource'
    ],
    function (angular, $, Util) {
        angular.module('ad.index')
            .directive('propertyConfigurer', ['$compile', '$parse', '_', '$sce', '$uibModal', function ($compile, $parse, _, $sce, $uibModal) {
                return {
                    link: function ($scope, $elm, $attrs, $ctrl) {
                        $scope.$watch('propertyEditorState', function (newValue, oldValue) {
                            if (newValue && (newValue + "") == "ready") {
                                if ($scope.extendOfIndex && $scope.indexProperty
                                    && typeof $scope.extendOfIndex === "object"
                                    && $scope.extendOfIndex.hasOwnProperty("config")
                                    && $scope.extendOfIndex.hasOwnProperty("option")
                                    && $scope.extendOfIndex["config"] === "property"
                                    && angular.isArray($scope.extendOfIndex["option"])) {

                                    //合并新增内容，目前只支持二级属性
                                    Util.mergeProperty($scope.extendOfIndex["option"], $scope.indexProperty["option"]);

                                    var $propertyEl = $('<uib-tabset class="property-tabs"></uib-tabset>');
                                    var groups = [];
                                    _.each($scope.extendOfIndex["option"], function (option) {
                                        if (groups.indexOf(option.group) == -1) {
                                            groups.push(option.group);
                                            $propertyEl.append('<uib-tab heading="' + option.group + '" class="property-tab-' + groups.indexOf(option.group) + '"></uib-tab>');
                                        }
                                    });
                                    _.each(groups, function (group, index) {
                                        var properties = _.where($scope.extendOfIndex["option"], {group: group});
                                        _.each(properties, function (property) {
                                            property.type = property.type ? (property.type + "") : "";
                                            $propertyEl.find(".property-tab-" + index).append($(propertyHtml(property)));
                                        });
                                    });
                                    $elm.append($propertyEl);
                                    $compile($elm.contents())($scope);
                                }
                            }
                        });

                        var guid = function () {
                            function s4() {
                                return Math.floor((1 + Math.random()) * 0x10000)
                                    .toString(16)
                                    .substring(1);
                            }

                            return s4() + s4() + s4() + s4() + s4() + s4() + s4() + s4();
                        };
                        //存放临时绑定变量
                        $scope["data"] = {};

                        var propertyHtml = function (property, parent) {
                            if (property.type.toLowerCase() == "text") {
                                return textHtml(property, parent);
                            } else if (property.type.toLowerCase() == "textarea") {
                                return textareaHtml(property, parent);
                            } else if (property.type.toLowerCase() == "script") {
                                return scriptHtml(property, parent);
                            } else if (property.type.toLowerCase() == "style") {
                                return styleHtml(property, parent);
                            } else if (property.type.toLowerCase() == "checked") {
                                return checkedHtml(property, parent);
                            } else if (property.type.toLowerCase() == "select") {
                                return selectHtml(property, parent);
                            } else if (property.type.toLowerCase() == "list") {
                                return listHtml(property, parent);
                            } else if (property.type.toLowerCase() == "color") {
                                return colorHtml(property, parent);
                            } else if (property.type.toLowerCase() == "colors") {
                                return colorsHtml(property, parent);
                            } else if (property.type.toLowerCase() == "number") {
                                return numberHtml(property, parent);
                            } else if (property.type.toLowerCase() == "date") {
                                return dateHtml(property, parent);
                            } else if (property.type.toLowerCase() == "padding") {
                                return paddingHtml(property, parent);
                            } else if (property.type.toLowerCase() == "resource") {
                                return resourceHtml(property, parent);
                            } else if (property.type.toLowerCase() == "textbinding") {
                                return textBindingHtml(property, parent);
                            } else if (property.type.toLowerCase() == "seriesbinding") {
                                return seriesBindingHtml(property, parent);
                            } else if (property.type.toLowerCase() == "sortbinding") {
                                return sortBindingHtml(property, parent);
                            } else if (property.type.toLowerCase() == "pivotevent") {
                                return pivotEventHtml(property, parent);
                            } else if (property.type.toLowerCase() == "group") {
                                return groupHtml(property, parent);
                            } else if (property.type.toLowerCase() == "pageselect") {
                                return pageSelectHtml(property, parent);
                            } else {
                                return '<div class="row">No Type: ' + property.type + '</div>';
                            }
                        };

                        // 包涵group下的情况
                        var getBinding = function (property, name, parent) {
                            if (parent === undefined) {
                                var index = _.findIndex($scope.extendOfIndex["option"], {id: property.id});
                                if (index >= 0) {
                                    return 'extendOfIndex.option[' + index + '].' + name;
                                }
                            } else {
                                var childIndex = _.findIndex($scope['data'][parent.currentItemName]['option'], {id: property.id});
                                if (childIndex >= 0) {
                                    return 'data.' + parent.currentItemName + '.option[' + childIndex + '].' + name;
                                }
                            }
                            return "";
                        };

                        var setDefault = function (property, defaultValue) {
                            if (property.default !== undefined) {
                                if (['boolean', 'number', 'string', 'date'].indexOf($.type(property.default)) > -1) {
                                    property.value = property.default;
                                } else if ($.isPlainObject(property.default)) {
                                    property.value = $.extend(true, {}, property.default);
                                } else if ($.isArray(property.default)) {
                                    property.value = $.extend(true, [], property.default);
                                } else if ($.isFunction(property.default)) {
                                    property.value = property.default();
                                }
                            } else {
                                property.value = defaultValue;
                            }
                        };

                        var getTooltip = function (property, parent) {
                            var tooltip = property.type;
                            delete property.tooltip;
                            if ($scope.indexProperty) {
                                if (parent === undefined) {
                                    var index = _.findIndex($scope.indexProperty["option"], {id: property.id});
                                    if (index >= 0) {
                                        tooltip = $scope.indexProperty["option"][index].tooltip;
                                    }
                                } else {
                                    var parentIndex = _.findIndex($scope.indexProperty["option"], {id: parent.id});
                                    if (parentIndex >= 0) {
                                        var childIndex = _.findIndex($scope.indexProperty["option"][parentIndex]['option'], {id: property.id});
                                        if (childIndex >= 0) {
                                            tooltip = $scope.indexProperty["option"][parentIndex]['option'][childIndex].tooltip;
                                        }
                                    }
                                }
                            }
                            var uuid = "Guid" + guid();
                            $scope["data"]["tooltip" + uuid] = $sce.trustAsHtml(tooltip)
                            return 'data.tooltip' + uuid;
                        };

                        var textHtml = function (property, parent) {
                            var uuid = "Guid" + guid();
                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable)
                                    setDefault(property, "");
                            };

                            var htmlStr = '<div class="row property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '<input type="text" ng-model="' + getBinding(property, "value", parent) + '" class="form-control" placeholder="' + property.name + '"/>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var scriptHtml = function (property, parent) {
                            var uuid = "Guid" + guid();
                            var aceEditor = null;
                            var aceSession = null;
                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable){
                                    setDefault(property, "");
                                    if(aceEditor){
                                        aceEditor.setValue(property.value);
                                    }
                                }
                            };
                            $scope["data"]["aceLoaded" + uuid] = function (_editor) {
                                aceEditor = _editor.getSession();
                                aceSession = _editor.getSession();
                                _editor.session.setMode("ace/mode/javascript");
                                _editor.setTheme("ace/theme/chrome");
                                _editor.$blockScrolling = Infinity;

                                _editor.setOptions({
                                    enableBasicAutocompletion: false,
                                    enableLiveAutocompletion: false,
                                    enableSnippets: false,
                                    fontSize: 14,
                                    wrap: true
                                });

                                $scope.$on('$destroy', function () {
                                    _editor.destroy();
                                    _editor.container.remove();
                                });

                                _editor.setValue(property.value);
                            };
                            $scope["data"]["aceChanged" + uuid] = function (e) {
                                property.value = aceSession.getDocument().getValue();
                            };
                            var htmlStr = '<div class="row property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += ' <div style="width:100%;min-height: 300px;margin: 10px 0; " ui-ace="{ require: [\'ace/ext/language_tools\'], onLoad : data.aceLoaded' + uuid + ', onChange: data.aceChanged' + uuid + ' }"></div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var styleHtml = function (property, parent) {
                            var uuid = "Guid" + guid();
                            var aceEditor = null;
                            var aceSession = null;
                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable){
                                    setDefault(property, "");
                                    if(aceEditor){
                                        aceEditor.setValue(property.value);
                                    }
                                }
                            };
                            $scope["data"]["aceLoaded" + uuid] = function (_editor) {
                                aceEditor = _editor.getSession();
                                aceSession = _editor.getSession();
                                _editor.session.setMode("ace/mode/css");
                                _editor.setTheme("ace/theme/chrome");
                                _editor.$blockScrolling = Infinity;

                                _editor.setOptions({
                                    enableBasicAutocompletion: false,
                                    enableLiveAutocompletion: false,
                                    enableSnippets: false,
                                    fontSize: 14,
                                    wrap: true
                                });

                                $scope.$on('$destroy', function () {
                                    _editor.destroy();
                                    _editor.container.remove();
                                });

                                _editor.setValue(property.value);
                            };
                            $scope["data"]["aceChanged" + uuid] = function (e) {
                                property.value = aceSession.getDocument().getValue();
                            };
                            var htmlStr = '<div class="row property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += ' <div style="width:100%;min-height: 300px;margin: 10px 0; " ui-ace="{ require: [\'ace/ext/language_tools\'], onLoad : data.aceLoaded' + uuid + ', onChange: data.aceChanged' + uuid + ' }"></div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var textareaHtml = function (property, parent) {
                            var uuid = "Guid" + guid();
                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable)
                                    setDefault(property, "");
                            };
                            var htmlStr = '<div class="row property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '<textarea ng-model="' + getBinding(property, "value", parent) + '" class="form-control mutil-text" placeholder="' + property.name + '"></textarea>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var checkedHtml = function (property, parent) {
                            var uuid = "Guid" + guid();
                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable)
                                    setDefault(property, false);
                            };
                            var htmlStr = '<div class="row property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '<div class="checkbox checkbox-success">';
                            htmlStr += '<input type="checkbox" name="checked_' + uuid + '" id="checked_' + uuid + '" ng-model="' + getBinding(property, "value", parent) + '">';
                            htmlStr += '<label for="checked_' + uuid + '">启用</label>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var selectHtml = function (property, parent) {
                            var uuid = "Guid" + guid();
                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable)
                                    setDefault(property, "");
                            };
                            var htmlStr = '<div class="row property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '<select class="form-control" ng-options="d.value as d.text for d in ' + getBinding(property, "data", parent) + '" ' +
                                'ng-model="' + getBinding(property, "value", parent) + '"></select>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var colorHtml = function (property, parent) {
                            var uuid = "Guid" + guid();
                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable)
                                    setDefault(property, "");
                            };
                            var htmlStr = '<div class="row property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '<input type="text" ng-model="' + getBinding(property, "value", parent) + '" ' +
                                'ng-style="{\'background-color\':' + getBinding(property, "value", parent) + '}" ' +
                                'class="form-control" placeholder="默认" colorpicker colorpicker-parent="true" ' +
                                'colorpicker-position="bottom" colorpicker-with-input="true"/>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var colorsHtml = function (property, parent) {
                            var uuid = "Guid" + guid();

                            $scope["data"]["addedColor" + uuid] = undefined;

                            if (property.enable) {
                                if (property.value.length == 0) {
                                    property.value = $.extend(true, [], property.data);
                                }
                            }

                            $scope.$on("colorpicker-closed", function (event, args) {
                                if (args.name != "data.addedColor" + uuid) return;
                                var index = property.value.indexOf(args.value);
                                if (index == -1) {
                                    property.value.push(args.value);
                                    $scope.$digest();
                                }
                            });

                            $scope["data"]["colorsChange" + uuid] = function () {
                                property.value = property.enable ? $.extend(true, [], property.data) : [];
                            };

                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable) {
                                    setDefault(property, []);
                                }
                            };

                            var htmlStr = '<div class="row property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '();data.colorsChange' + uuid + '();"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '<div class="row color-list">';
                            htmlStr += '<li ng-repeat="color in ' + getBinding(property, "enable", parent) + '?' + getBinding(property, "value", parent) + ':' + getBinding(property, "data", parent) + '">';
                            htmlStr += '<span ng-click="' + getBinding(property, "value", parent) + '.splice(' + getBinding(property, "value", parent) + '.indexOf(color), 1);" ng-style="{\'background-color\': color}"></span>';
                            htmlStr += '</li>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="color-select-row">';
                            htmlStr += '<button class="btn btn-default" ng-disabled="!' + getBinding(property, "enable", parent) + '" ' +
                                'ng-model="data.addedColor' + uuid + '" colorpicker  colorpicker-parent="true" colorpicker-position="bottom" colorpicker-with-input="true">';
                            htmlStr += '添加颜色';
                            htmlStr += '</button>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var dateHtml = function (property, parent) {
                            var uuid = "Guid" + guid();
                            if (!property.value) property.value = new Date();
                            $scope["data"]["dateOpened" + uuid] = false;
                            $scope["data"]["dateOption" + uuid] = {
                                startingDay: 1
                            };
                            $scope["data"]["dateOpen" + uuid] = function () {
                                $scope["data"]["dateOpened" + uuid] = true;
                            };

                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable)
                                    setDefault(property, new Date());
                            };

                            var htmlStr = '<div class="row property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '<div class="date-select"><input type="text" ng-model="' + getBinding(property, "value", parent) + '" ' +
                                'class="form-control" placeholder="' + property.name + '" ' +
                                'uib-datepicker-popup is-open="data.dateOpened' + uuid + '" ' +
                                'datepicker-options="data.dateOption' + uuid + '" ' +
                                'ng-required="true" close-text="关闭" current-text="今天" clear-text="清除"/>';
                            htmlStr += '<span class="input-group-btn">';
                            htmlStr += '    <button type="button" class="btn btn-default" ng-click="data.dateOpen' + uuid + '()">' +
                                '<i class="glyphicon glyphicon-calendar"></i></button>';
                            htmlStr += '</span></div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var numberHtml = function (property, parent) {
                            var uuid = "Guid" + guid();

                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable)
                                    setDefault(property, 0);
                            };

                            var htmlStr = '<div class="row property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '   <input type="number" step="any" name="input" ng-model="' + getBinding(property, "value", parent) + '" class="form-control" placeholder="' + property.name + '"/>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var pivotEventHtml = function (property, parent) {

                            var uuid = "Guid" + guid();

                            $scope["data"]["pivotEventSelect" + uuid] = function () {
                                if (property.value
                                    && property.value.Event
                                    && property.value.Params
                                    && angular.isArray(property.value.Params)) {
                                    $scope.bindPivotEvent(property.value);
                                }
                            };

                            var htmlStr = '<div class="row chart-pivot-event">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<label class="control-label">钻取设置</label>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<button class="btn btn-default" ng-click="data.pivotEventSelect' + uuid + '()">' + property.name + '</button>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var paddingHtml = function (property, parent) {
                            var uuid = "Guid" + guid();

                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable)
                                    setDefault(property, [0, 0, 0, 0]);
                            };

                            var htmlStr = '<div class="row property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '   <div class="col-xs-3">';
                            htmlStr += '         <input type="number" ng-model="' + getBinding(property, "value", parent) + '[0]" class="form-control" placeholder="Top">';
                            htmlStr += '    </div>';
                            htmlStr += '    <div class="col-xs-3">';
                            htmlStr += '         <input type="number" ng-model="' + getBinding(property, "value", parent) + '[1]" class="form-control" placeholder="Right">';
                            htmlStr += '    </div>';
                            htmlStr += '    <div class="col-xs-3">';
                            htmlStr += '         <input type="number" ng-model="' + getBinding(property, "value", parent) + '[2]" class="form-control" placeholder="Bottom">';
                            htmlStr += '    </div>';
                            htmlStr += '    <div class="col-xs-3">';
                            htmlStr += '         <input type="number" ng-model="' + getBinding(property, "value", parent) + '[3]" class="form-control" placeholder="Left">';
                            htmlStr += '    </div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var resourceHtml = function (property, parent) {
                            var uuid = "Guid" + guid();

                            $scope["data"]["resourceEnableClick" + uuid] = function () {
                                if (!property.enable)
                                    setDefault(property, "");
                            };

                            $scope["data"]["resourceClick" + uuid] = function () {
                                var modalInstance = $uibModal.open({
                                    animation: true,
                                    templateUrl: 'app/modules/index/views/index-resource.tpl.html',
                                    controller: 'adIndexResourceController',
                                    size: 'lg',
                                    resolve: {
                                        item: {}
                                    }
                                });

                                modalInstance.result.then(function (data) {
                                    property.value = data;
                                }, function () {
                                });
                            };


                            var htmlStr = '<div class="row property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.resourceEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '<div class="col-xs-10 resource-input"><input type="text" name="input" ng-model="' + getBinding(property, "value", parent) + '" class="form-control" placeholder="' + property.name + '"/></div>';
                            htmlStr += '<div class="col-xs-2">';
                            htmlStr += '<button class="btn btn-default" ng-disabled="!' + getBinding(property, "enable", parent) + '" ng-click="data.resourceClick' + uuid + '()">';
                            htmlStr += '选择';
                            htmlStr += '</button>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var listHtml = function (property, parent) {
                            var uuid = "Guid" + guid();

                            if (!$.isArray(property.value)) {
                                property.value = [];
                            }

                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable)
                                    setDefault(property, []);
                            };

                            $scope["data"]['toggleSelection' + uuid] = function (item) {
                                var idx = property.value.indexOf(item);
                                if (idx > -1) {
                                    property.value.splice(idx, 1);
                                }
                                else {
                                    property.value.push(item);
                                }
                            };

                            var htmlStr = '<div class="row property-row property-arary">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '<div class="checkbox checkbox-inline checkbox-success"" ng-repeat="item in ' + getBinding(property, "data", parent) + '">';
                            htmlStr += '    <input type="checkbox" name="selectedItems[]" id="checked_' + uuid + '_{{$index}}"';
                            htmlStr += '    value="{{item}}" ng-checked="' + getBinding(property, "value", parent) + '.indexOf(item.value) > -1"';
                            htmlStr += '    ng-click="data.toggleSelection' + uuid + '(item.value)"/> <label for="checked_' + uuid + '_{{$index}}">{{item.text}}</label>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var sortBindingHtml = function (property, parent) {
                            var uuid = "Guid" + guid();

                            if (property.dataset) {
                                $scope["data"]["currentBinding" + uuid] = _.findWhere($scope.bindingOfIndex, {DataSetCode: property.dataset});
                            } else {
                                $scope["data"]["currentBinding" + uuid] = undefined;
                            }
                            $scope["data"]['changeBinding' + uuid] = function () {
                                if ($scope["data"]["currentBinding" + uuid]) {
                                    property.dataset = $scope["data"]["currentBinding" + uuid].DataSetCode;
                                    compareBindings($scope["data"]["currentBinding" + uuid]);
                                }
                            };
                            $scope["data"]['dragControlListeners' + uuid] = {
                                containment: '.bindingSortContainer'
                            };

                            var compareBindings = function (bindingDataSet) {
                                if ($scope.bindingOfIndex.length == 0) return;
                                var columnsArray = [];
                                _.each(bindingDataSet.Dimensions, function (dimension) {
                                    if (!_.findWhere(columnsArray, {
                                            ColumnCode: dimension.Code
                                        })) {
                                        columnsArray.push({
                                            ColumnCaption: dimension.Name,
                                            ColumnName: dimension.Column,
                                            ColumnCode: dimension.Code
                                        })
                                    }
                                });

                                _.each(bindingDataSet.Measures, function (measure) {
                                    if (!_.findWhere(columnsArray, {
                                            ColumnCode: measure.Code
                                        })) {
                                        columnsArray.push({
                                            ColumnCaption: measure.Name,
                                            ColumnName: measure.Column,
                                            ColumnCode: measure.Code
                                        })
                                    }
                                });
                                property.columns = columnsArray;
                            };

                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable) {
                                    property.dataset = "";
                                    property.columns = [];
                                    $scope["data"]["currentBinding" + uuid] = undefined;
                                }
                            };

                            var htmlStr = '<div class="row binding-select property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '<div class="col-xs-6 binding-container"><span class="title">数据集</span><select class="form-control" ng-options="b as b.Name for b in bindingOfIndex" ' +
                                'ng-model="data.currentBinding' + uuid + '" ng-change="data.changeBinding' + uuid + '()" ng-click="data.changeBinding' + uuid + '()"></select></div>';
                            htmlStr += '<div class="col-xs-6 bindingSortContainer">' +
                                '           <ul data-as-sortable="data.dragControlListeners' + uuid + '" data-ng-model="' + getBinding(property, "columns", parent) + '">' +
                                '               <li data-ng-repeat="binding in ' + getBinding(property, "columns", parent) + '" data-as-sortable-item>' +
                                '                   <div data-as-sortable-item-handle>{{binding.ColumnCaption}}</div>' +
                                '               </li>' +
                                '           </ul>' +
                                '       </div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;

                        };

                        var seriesBindingHtml = function (property, parent) {
                            var uuid = "Guid" + guid();
                            $scope["data"]["currentBinding" + uuid + "Dimensions"] = [];
                            $scope["data"]["currentBinding" + uuid + "Measures"] = [];

                            if (property.dataset) {
                                $scope["data"]["currentBinding" + uuid] = _.findWhere($scope.bindingOfIndex, {DataSetCode: property.dataset});
                                if ($scope["data"]["currentBinding" + uuid]) {
                                    $scope["data"]["currentBinding" + uuid + "Dimensions"] = [];
                                    _.each(_.findWhere($scope.bindingOfIndex, {DataSetCode: property.dataset}).Dimensions, function (dimension) {
                                        $scope["data"]["currentBinding" + uuid + "Dimensions"].push({
                                            ColumnCaption: dimension.Name,
                                            ColumnName: dimension.Column,
                                            ColumnCode: dimension.Code
                                        });
                                    });
                                    $scope["data"]["currentBinding" + uuid + "Measures"] = [];
                                    _.each(_.findWhere($scope.bindingOfIndex, {DataSetCode: property.dataset}).Measures, function (measure) {
                                        $scope["data"]["currentBinding" + uuid + "Measures"].push({
                                            ColumnCaption: measure.Name,
                                            ColumnName: measure.Column,
                                            ColumnCode: measure.Code
                                        });
                                    });

                                    property.dimension = _.findWhere($scope["data"]["currentBinding" + uuid + "Dimensions"], {
                                        ColumnCaption: property.dimension ? property.dimension.ColumnCaption : "",
                                        ColumnName: property.dimension ? property.dimension.ColumnName : "",
                                        ColumnCode: property.dimension ? property.dimension.ColumnCode : ""
                                    });
                                    property.measure = _.findWhere($scope["data"]["currentBinding" + uuid + "Measures"], {
                                        ColumnCaption: property.measure ? property.measure.ColumnCaption : "",
                                        ColumnName: property.measure ? property.measure.ColumnName : "",
                                        ColumnCode: property.measure ? property.measure.ColumnCode : ""
                                    });
                                }
                            } else {
                                $scope["data"]["currentBinding" + uuid] = undefined;
                            }

                            $scope["data"]['changeBinding' + uuid] = function () {
                                if ($scope["data"]["currentBinding" + uuid]) {
                                    property.dataset = $scope["data"]["currentBinding" + uuid].DataSetCode
                                    $scope["data"]["currentBinding" + uuid + "Dimensions"] = [];
                                    _.each(_.findWhere($scope.bindingOfIndex, {DataSetCode: property.dataset}).Dimensions, function (dimension) {
                                        $scope["data"]["currentBinding" + uuid + "Dimensions"].push({
                                            ColumnCaption: dimension.Name,
                                            ColumnName: dimension.Column,
                                            ColumnCode: dimension.Code
                                        });
                                    });
                                    $scope["data"]["currentBinding" + uuid + "Measures"] = [];
                                    _.each(_.findWhere($scope.bindingOfIndex, {DataSetCode: property.dataset}).Measures, function (measure) {
                                        $scope["data"]["currentBinding" + uuid + "Measures"].push({
                                            ColumnCaption: measure.Name,
                                            ColumnName: measure.Column,
                                            ColumnCode: measure.Code
                                        });
                                    });
                                }
                            };

                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable) {
                                    property.dataset = "";
                                    property.dimension = {};
                                    property.measure = {};
                                    $scope["data"]["currentBinding" + uuid] = undefined;
                                }
                            };

                            var htmlStr = '<div class="row binding-select property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '<span class="title">数据集</span><select class="form-control" ng-options="b as b.Name for b in bindingOfIndex" ' +
                                'ng-model="data.currentBinding' + uuid + '" ng-change="data.changeBinding' + uuid + '()" ng-click="data.changeBinding' + uuid + '()"></select>';
                            htmlStr += '<span class="title">维度列</span><select class="form-control" ng-options="d as d.ColumnCaption for d in data.currentBinding' + uuid + 'Dimensions" ' +
                                'ng-model="' + getBinding(property, "dimension", parent) + '"></select>';
                            htmlStr += '<span class="title">度量列</span><select class="form-control" ng-options="d as d.ColumnCaption for d in data.currentBinding' + uuid + 'Measures" ' +
                                'ng-model="' + getBinding(property, "measure", parent) + '"></select>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var textBindingHtml = function (property, parent) {
                            var uuid = "Guid" + guid();

                            if (property.dataset) {
                                $scope["data"]["currentBinding" + uuid] = _.findWhere($scope.bindingOfIndex, {DataSetCode: property.dataset});
                            } else {
                                $scope["data"]["currentBinding" + uuid] = undefined;
                            }

                            if (!property.ctype) property.ctype = 'all';

                            $scope["data"]['currentBindingColumns' + uuid] = [];

                            $scope["data"]['changeBinding' + uuid] = function () {
                                if ($scope["data"]["currentBinding" + uuid]) {
                                    property.dataset = $scope["data"]["currentBinding" + uuid].DataSetCode;
                                    compareBindings($scope["data"]["currentBinding" + uuid]);
                                }
                            };

                            var compareBindings = function (bindingDataSet) {
                                if ($scope.bindingOfIndex.length == 0) return;
                                $scope["data"]['currentBindingColumns' + uuid] = [];

                                if (property.ctype === "all" || property.ctype === "dimension") {
                                    _.each(bindingDataSet.Dimensions, function (dimension) {
                                        if (!_.findWhere($scope["data"]['currentBindingColumns' + uuid], {
                                                ColumnCode: dimension.Code
                                            })) {
                                            $scope["data"]['currentBindingColumns' + uuid].push({
                                                ColumnCaption: dimension.Name,
                                                ColumnName: dimension.Column,
                                                ColumnCode: dimension.Code
                                            })
                                        }
                                    });
                                }

                                if (property.ctype === "all" || property.ctype === "measure") {
                                    _.each(bindingDataSet.Measures, function (measure) {
                                        if (!_.findWhere($scope["data"]['currentBindingColumns' + uuid], {
                                                ColumnCode: measure.Code
                                            })) {
                                            $scope["data"]['currentBindingColumns' + uuid].push({
                                                ColumnCaption: measure.Name,
                                                ColumnName: measure.Column,
                                                ColumnCode: measure.Code
                                            })
                                        }
                                    });
                                }
                            };
                            if ($scope["data"]["currentBinding" + uuid]) {
                                compareBindings($scope["data"]["currentBinding" + uuid]);

                                property.column = _.findWhere($scope["data"]['currentBindingColumns' + uuid], {
                                    ColumnCaption: property.column ? property.column.ColumnCaption : "",
                                    ColumnName: property.column ? property.column.ColumnName : "",
                                    ColumnCode: property.column ? property.column.ColumnCode : ""
                                });
                            }

                            $scope["data"]["checkEnableClick" + uuid] = function () {
                                if (!property.enable) {
                                    property.dataset = "";
                                    property.column = {};
                                    $scope["data"]["currentBinding" + uuid] = undefined;
                                }
                            };

                            var htmlStr = '<div class="row binding-select property-row">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<input type="checkbox" name="' + uuid + '" id="' + uuid + '" ng-model="' + getBinding(property, "enable", parent) + '" ng-change="data.checkEnableClick' + uuid + '()"/>';
                            htmlStr += '<label for="' + uuid + '" class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<div class="property-state" ng-class="{disabled: !' + getBinding(property, "enable", parent) + '}"></div>';
                            htmlStr += '<span class="title">数据集</span><select class="form-control" ng-options="b as b.Name for b in bindingOfIndex" ' +
                                'ng-model="data.currentBinding' + uuid + '" ng-change="data.changeBinding' + uuid + '()" ng-click="data.changeBinding' + uuid + '()"></select>';
                            htmlStr += '<span class="title">绑定列</span><select class="form-control" ng-options="d as d.ColumnCaption for d in data.currentBindingColumns' + uuid + '" ' +
                                ' ng-model="' + getBinding(property, "column", parent) + '"></select>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };


                        var pageSelectHtml = function (property, parent) {

                            var uuid = "Guid" + guid();

                            $scope["data"]["pageSelect" + uuid] = function () {
                                $scope.bindLoadPage(property.value).then(function (data) {
                                    property.value = data.PageId;
                                }, function () {
                                });
                            };

                            var htmlStr = '<div class="row page-select">';
                            htmlStr += '<div class="form-group">';
                            htmlStr += '<div class="col-xs-3 title-container">';
                            htmlStr += '<label class="control-label">页面加载</label>';
                            htmlStr += '</div>';
                            htmlStr += '<div class="col-xs-9">';
                            htmlStr += '<button class="btn btn-default" ng-click="data.pageSelect' + uuid + '()">页面选择</button>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            htmlStr += '</div>';
                            return htmlStr;
                        };

                        var groupHtml = function (property, parent) {
                            var uuid = "Guid" + guid();

                            property.currentItemName = "currentItem" + uuid;

                            $scope["data"]["currentItem" + uuid] = undefined;

                            if (!property.items) {
                                property.items = [];
                            }

                            $scope["data"]['addItem' + uuid] = function () {
                                $scope["data"]["currentItem" + uuid] = {
                                    name: '分组-' + new Date().getMilliseconds(),
                                    option: $.extend(true, [], property.option)
                                };
                                property.items.push($scope["data"]["currentItem" + uuid]);
                                $scope["data"]['changeItem' + uuid]();
                            };

                            $scope["data"]['removeItem' + uuid] = function () {
                                if ($scope["data"]["currentItem" + uuid]) {
                                    var index = property.items.indexOf($scope["data"]["currentItem" + uuid]);
                                    property.items.splice(index, 1);
                                    if (property.items.length > 0) {
                                        $scope["data"]["currentItem" + uuid] = property.items[property.items.length - 1];
                                    } else {
                                        $scope["data"]["currentItem" + uuid] = undefined;
                                    }
                                    $scope["data"]['changeItem' + uuid]();
                                }
                            };

                            $scope["data"]['changeItem' + uuid] = function () {
                                var innerHtmlStr = "";
                                if($scope["data"]["currentItem" + uuid]){
                                    _.each($scope["data"]["currentItem" + uuid].option, function (option) {
                                        innerHtmlStr += propertyHtml(option, property);
                                    });
                                }

                                var $groupChildren = $("#group" + uuid);
                                $groupChildren.empty();
                                $groupChildren.append($(innerHtmlStr));
                                $compile($groupChildren.contents())($scope);
                            };

                            var htmlStr = '<div class="row item-group">';
                            htmlStr += '          <div class="panel panel-default">';
                            htmlStr += '              <div class="panel-heading"><label class="control-label">' + property.name + '</label>';
                            htmlStr += '<i class="glyphicon glyphicon-info-sign" ' +
                                ' tooltip-placement="right" tooltip-trigger="mouseenter" tooltip-class="tooltip-customClass"' +
                                ' uib-tooltip-html="' + getTooltip(property, parent) + '"></i>';
                            htmlStr += '                <select ng-model="data.currentItem' + uuid + '" ng-change="data.changeItem' + uuid + '()"' +
                                'ng-options="item as item.name for item in ' + getBinding(property, "items", parent) + '"></select>';
                            htmlStr += '<input type="text" ng-model="data.currentItem' + uuid + '.name" class="form-control group-input"/>';
                            htmlStr += '                <button class="btn btn-default" ng-click="data.addItem' + uuid + '()">新增</button>';
                            htmlStr += '                <button class="btn btn-default" ng-click="data.removeItem' + uuid + '()">移除</button>';
                            htmlStr += '              </div>';
                            htmlStr += '              <div class="panel-body" ng-hide="!data.currentItem' + uuid + '" id="group' + uuid + '">';

                            htmlStr += '              </div>';
                            htmlStr += '          </div>';
                            htmlStr += '   </div>';

                            return htmlStr;
                        };
                    }
                };
            }]);
    });